<template>
<div class="home">

  <Header title="litthy小店">
    <i class="cubeic-tag" @click="showCatg"></i>
  </Header>

  <cube-drawer ref="drawer"
                title="请选择分类"
                :data="[drawList]"
                @select="selectHandler">

  </cube-drawer>

  <cube-slide :data="slider">
    <cube-slide-item v-for="(item,index) in slider" :key="index">
      <router-link :to="`/list/${item.id}`">
        <img :src="item.img" class="slider">
      </router-link>
    </cube-slide-item>
  </cube-slide>

  <goods-list @addCart="onAddCart" :data="goodlist"></goods-list>

  <div class="ball-wap">
    <transition @before-enter="beforeEnter" @enter="enter" @afterEnter="afterEnter">
    <div class="ball" v-show="ball.show">
      <div class="inner"><i class="cubeic-add"></i></div>
    </div>
    </transition>
  </div>

</div>
</template>

<script>
import GoodsList from '@/components/List.vue'
import Header from '@/components/Header.vue'
let labels = {
  'fe': '前端',
  'python': 'python',
  'java': 'java',
  'bigdata': '大数据',
  'ai': '人工智能'
}

export default {
  name: 'home',
  data () {
    return {
      slider: [],
      keys: [],
      data: [],
      selectKeys: [],
      ball: {
        show: false,
        el: null
      }
    }
  },
  components: {
    GoodsList,
    Header
  },
  async created () {
    const ret = await this.$axios.get('/api/goods')
    this.slider = ret.slider
    this.keys = ret.keys
    this.selectKeys = [...this.keys]
    this.data = ret.data
  },
  computed: {
    drawList () {
      return this.keys.map(v => {
        return {
          value: v,
          text: labels[v]
        }
      })
    },
    goodlist () {
      let ret = []
      this.selectKeys.forEach(v => {
        ret = ret.concat(this.data[v])
      })
      return ret
    }
  },
  methods: {
    showCatg () {
      this.$refs.drawer.show()
    },
    selectHandler (val) {
      this.selectKeys = [...val]
    },
    onAddCart (el) {
      this.ball.show = true
      this.ball.el = el
    },
    beforeEnter (el) {
      const dom = this.ball.el
      const rect = dom.getBoundingClientRect()
      const x = rect.left - window.innerWidth / 2
      const y = -(window.innerHeight - rect.top - 10)
      el.style.display = ''
      el.style.transform = `translate3d(0,${y}px,0)`
      const inner = el.querySelector('.inner')
      inner.style.transform = `translate3d(${x}px,0,0)`
    },
    enter (el, done) {
      this._reflow = document.body.offsetHeight
      // 强制重绘
      const inner = el.querySelector('.inner')
      el.style.transform = `translate3d(0,0,0)`
      inner.style.transform = `translate3d(0,0,0)`
      el.addEventListener('transitionend', done)
    },
    afterEnter (el) {
      this.ball.show = false
      el.style.display = 'none'
    }
  }
}
</script>
<style lang="stylus" scoped>
.slider
  width: 100%;
.ball-wap
  .ball
    position fixed
    left 50%
    bottom 10px
    z-index 10
    transition all 0.5s cubic-bezier(0.49,-0.29,0.75,0.41)
  .inner
    width 16px
    height 16px
    border-radius 50%
    transition all 0.5s linear
    .cubeic-add
      font-size 20px
      color #555
</style>
